<template>
	<view>
		<uni-list-item title="账号安全" v-if="loginStatus" @click="open('user-password')" clickable showArrow></uni-list-item>
		<uni-list-item title="设置邮箱" v-if="loginStatus" @click="open('user-email')" clickable showArrow></uni-list-item>
		<uni-list-item title="资料编辑" v-if="loginStatus"  @click="open('user-userInfo')" clickable showArrow></uni-list-item>
		<uni-list-item title="清除缓存" @click="clear()" clickable showArrow>
			<view slot="footer">{{currentSize|format}}</view>
		</uni-list-item>
		<uni-list-item title="关于我们" @click="open('about')" clickable showArrow></uni-list-item>
		<view class="py-2 px-3" v-if="loginStatus">
			<button class="bg-main text-white" style="border-radius: 50rpx; border: 0;" @click="logout" type="primary">退出登录</button>
		</view>
	</view>
</template>

<script>
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
	import { mapState } from 'vuex';
	export default {
		components:{
			uniListItem
		},
		data() {
			return {
				currentSize:0
			}
		},
		onLoad() {
			this.getStorageInfo()
			
		},
		computed:{
			...mapState({
				loginStatus:state=>state.loginStatus
			})
		},
		filters:{
			format(value){
				return value > 1024?(value/1024).toFixed(2)+"MB":value.toFixed(2)+"KB"
			}
		},
		methods: {
			open(path){
				uni.navigateTo({
					url:`../${path}/${path}`
				})
			},
			getStorageInfo(){
				let res = uni.getStorageInfoSync()
				this.currentSize = res.currentSize
			},
			clear(){
				uni.showModal({
					title:'提示',
					comment:'是否清除所有缓存？',
					concelText:'不清除',
					confirmText:'清除',
					success: (res) => {
						if(res.confirm)
						{
							uni.clearStorage();
							this.getStorageInfo()
							uni.showToast({
								title:"清除成功",
								icon:'none'
							})
						}
					}
				})
			},
			logout(){
				uni.showModal({
					content:'确定退出登录',
					cancelText:"取消",
					confirmText:"退出",
					success: (res) => {
					   	if(res.confirm)
						{
							this.$store.commit("logout")
							uni.showToast({
								title:"退出成功",
								icon:'none'
							})
						}
					}
				})
			}
		}
	}
</script>

<style>

</style>
